<template>
  <Header>
    <W1200>
      <Menu mode="horizontal" theme="light" :active-name="menuActionName" >
        <div class="layout-logo">
          <img src="/static/img/iview-logo.png" alt="">
        </div>
        <div class="layout-nav" style="float:left;">
          <i-menu-item :name="'/channel/'+i" :to="'/channel/'+i" v-for="i of 5" :key="i">
            <Icon type="ios-paper-plane-outline" />
            频道{{i}}
          </i-menu-item>
        </div>
        <div class="layout-nav">
          <MenuItem name="/" to="/">
            <Icon type="ios-keypad"></Icon>
            Index
          </MenuItem>
          <MenuItem name="/about" to="/about" >
            <Icon type="ios-paper"></Icon>
            关于
          </MenuItem>
          <MenuItem name="" v-if="this.$store.state.user==null" class="zcdl">
            <Button type="error" to="/login">登录</Button>
            <Button type="info" to="/register">注册</Button>
          </MenuItem>
          <Submenu name="" v-if="this.$store.state.user!=null">
            <template slot="title">
              <Icon type="ios-contact" />
              {{ this.$store.state.user.nickname }}
            </template>
            <MenuGroup title="使用">
              <MenuItem name="3-1">个人中心</MenuItem>
              <MenuItem name="" @click.native="logout">注销</MenuItem>
            </MenuGroup>
          </Submenu>
        </div>
      </Menu>
    </W1200>
  </Header>
</template>

<script>
import W1200 from '@/components/W1200'
import {logout} from '@/utils/service'

export default {
  name: 'MyHeader',
  components: {W1200},
  data(){
    return{
      menuActionName:this.$route.path
    }
  },
  methods: {
    routerTo(name){
      this.$router.push(name)
    },
    logout () {
      logout(data => {
        console.log(data)
        if (data.code == 100) {
          window.sessionStorage.clear()
          this.$store.commit('setUser', null)
          this.$cookies.remove('rememberMe')
          this.$router.push('/login')
        }
      })
    }
  },
  created () {

  }
}
</script>

<style scoped>
  .layout-logo{
    width: 130px;
    height: 50px;
    border-radius: 3px;
    float: left;
    position: relative;
    /*top: 5px;*/
    left: 20px;
  }
  .layout-logo img {
    height: 50px;
  }
  .layout-nav{
    margin: 0 auto;
    margin-right: 20px;
    float:right;
  }
  .ivu-layout-header{
    background: #ffffff!important;
  }
  .ivu-menu-horizontal.ivu-menu-light:after {
    background: #ffffff;
  }
  .ivu-layout-header {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.01), 0 4px 4px 0 rgba(0,0,0,.04);
  }
  .ivu-layout-header,.ivu-menu-horizontal,.ivu-menu-item{
    height: 50px;
    line-height: 50px;
  }

  /* 鼠标滑过注册登录按钮时下方不出蓝条 */
  .zcdl:hover {
    border-bottom: 0 solid #ffffff!important;
  }

</style>
